<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js">
   
    </script>
	 
</head>
<body>
<!--
     什么是模块化  是从代码逻进行划分
     什么是组件  就是将页面相同的页面进行划分 就是叫代码之间的重复利用
     -->
<!--    定义组件的三种方式-->

<div id="app">
    {{name}}
    <h2>创建组件的第一种方式</h2>
    <mycom1></mycom1>
    <h2>创建组件的第二种方式</h2>
    <mycom2></mycom2>
    <h2>创建组件的第三种方式</h2>
    <mycom3></mycom3>
    <h2>创建组件的第四种方式</h2>
    <mycom4></mycom4>

    <h2>创建私有组件</h2>

    <demo></demo>
    <demo2></demo2>
    <mycom5></mycom5>
    <mycom6></mycom6>

    <!--   组件切换第一种方式-->
    <a href="" @click.prevent="flag=true">这是登录按钮</a>
    <a href="" @click.prevent="flag=false">这是注册</a>
    <login v-if="flag"></login>
    <register v-if="!flag"></register>
    <!--组件的切换第二种方式使用comment进行组件切换comment是vue组件-->
    <a href="" @click.prevent="commentName='login'">这是登录按钮</a>
    <a href="" @click.prevent="commentName='register'">这是注册</a>
    <comment :is="commentName"></comment>
    <!--    父子组件进行传值-->
    <demo3 v-bind:testProfile="testProfile"></demo3>
    <!-- 子组件和父组件的的方法传递 组件多绑定-->
    <demo5 v-on:fun1="show" @fun2="goToData"></demo5>

</div>

<!--    创建组件的四种方式-->
<template id="tmp1">
    <div>
        <h3>
            这是用第四种方式创建出来的组件
        </h3>
        <h2>
            这种比较好用
        </h2>
    </div>
</template>
<template id="tmp2">
    <div>
        <h3>这是私有化组件第四种</h3>
    </div>
</template>
<template id="tmp3">
    <div>
        <input type="button" value="count++" @click="countAdd">
        <h3>{{count}}</h3>
    </div>
</template>

<template id="tmp4">
    <div>
        <h3>子组件调用传递父组件的方法</h3>
        <input type="button" value="调用无参组件方法" @click="runmetherd">
        <h3>子组件调用有参数的父组件方法</h3>
        <input type="button" value="调用无参组件方法" @click="rundataMethod">
    </div>
</template>
<script>

    //创建组件的一种方式
    // 第一种方式的第一步
    // template 创建出来的组件只能有一个根节点 ，
    var com1 = Vue.extend({
        template: '<h3>这是👌第一种</h3>  '  //  template 展示的组件的html样式
    })
    // 第一种方式的第二步  加到vue注册列表中
    Vue.component('mycom1', com1)


    <!--    创建组件的二种方式-->
    Vue.component('mycom2', Vue.extend({
        template: '<h3>这是👌第二种</h3>  '
    }))
    <!--    创建组件的三种方式-->
    Vue.component('mycom3', {
        template: '<h3>这是👌第三种</h3>  '
    })
    <!--    创建组件的四种方式-->
    Vue.component('mycom4', {
        template: '#tmp1'
    })
    // vue 的data 和methods
    // 组件的data 必须是一个方法 ，组件中的data 必须返回对象
    // 组件数据为什么是function
    Vue.component('mycom5', {
        template: "<h2>组件的方法和数据,组件的返回的数据{{msg}}</h2>",
        data: function () {
            return {
                msg: '这是组件自定一的参数和数据'
            }
        }
    })
    Vue.component('mycom6', {
        template: '#tmp3',
        data: function () {
            return {count: 0}
        },
        methods: {
            countAdd() {
                this.count++
            }
        }
    })
    Vue.component('login', {
        template: '<h3>这是登录</h3>'
    })
    Vue.component('register', {
            template: '<h3>这是注册组件</h3>'
        }
    )
    var vm = new Vue({
        el: '#app',
        data: {
            name: "ceshi",
            commentName: "login",
            flag: false,
            testProfile: "父组件的的值传输"
        },
        methods: {
            show() {
                console.log("这是无参调用方法")
            },
            goToData(data) {
                console.log("展示数据并返回数据,子组件返回的数据"+data)
            }
        },
        // 私有化组件创建方式活儿使用方式
        components: {
            demo: {
                template: "<h3>这是私的模块</h3>"
            },
            demo2: {
                template: '#tmp2'
            }, demo3: {
                //优化参数创建方式
                data() {
                    return {
                        testName: "这是私有化子组件"
                    }
                },
                template: "<h3> 这是组件{{testName}}和父组件的参数{{testProfile}}<demo4></demo4></h3>",
                //接收父组件传输值过来接收使用
                props: ['testProfile'],
                //子组件只能在上一级的父组件中使用
                components: {
                    demo4: {
                        template: "<h4>子组件嵌套------</h4>"
                    }
                }
            }, demo5: {
                template: '#tmp4',
                methods: {
                    runmetherd() {
                        this.$emit('fun1')
                    },
                    rundataMethod() {
                        this.$emit('fun2', "请求调用参数2")
                    }
                }
            }
        }

    })
   
</script>
</body>
</html>
<script>
    import Index from "../vue-maoyan/src/pages";

    export default {
        components: {Index}
    }
</script>